<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="./index.css" />
  </head>

  <body>
    <div class="wrap">
      <div class="title">学生系统</div>
      <div id="form">
        <p>姓名<input id="username" type="text" value="张三123" /></p>
        <p>年龄<input id="age" type="text" value="21" /></p>
        <p>
          性别
          <select id="gender">
            <option>男</option>
            <option>女</option>
            <option>你猜</option>
          </select>
        </p>
        <p>
          <input type="button" value="添加" id="addBtn" />
          <input type="button" value="排序" id="sortBtn" />
        </p>
      </div>
      <table id="table">
        <thead>
          <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody></tbody>
      </table>
    </div>

    <script>
      getlist();
      function getlist() {
        let xhr;
        if (window.XMLHttpRequest) {
          xhr = new XMLHttpRequest();
        } else {
          xhr = new ActiveXObject();
        }
        xhr.open("get", "./getlist.php", true);
        xhr.onload = function () {
          let data = JSON.parse(xhr.responseText);
          renderDom(data);
          del();
        };
        xhr.send();
      }
      let addbtn = document.querySelector("#addBtn");
      let userEle = document.querySelector("#username");
      let genderEle = document.querySelector("#gender");
      let ageEle = document.querySelector("#age");
      let tbodyEle = document.querySelector("tbody");
      let sortEle = document.querySelector("#sortBtn");
      addbtn.onclick = function () {
        let username = userEle.value;
        let gender = genderEle.value;
        let age = ageEle.value;
        let xhr;
        if (window.XMLHttpRequest) {
          xhr = new XMLHttpRequest();
        } else {
          xhr = new ActiveXObject();
        }
        xhr.open(
          "get",
          `./addStudent.php?username=${username}&gender=${gender}&age=${age}`,
          true
        );
        xhr.onload = function () {
          let resdata = JSON.parse(xhr.responseText);
          if (resdata.status == 1) {
            console.log("添加成功");
            getlist();
          } else {
            console.log("添加失败");
          }
        };
        xhr.send();
      };
      function renderDom(data) {
        tbodyEle.innerHTML = "";
        data.forEach((item) => {
          let trEle = document.createElement("tr");
          trEle.innerHTML = `<td>${item.username}</td><td>${item.age}</td><td>${item.gender}</td><td myid="${item.id}" class='del'>删除</td>`;
          tbodyEle.appendChild(trEle);
        });
      }

      // 删除功能;
      function del() {
        let delBtns = document.querySelectorAll(".del");
        delBtns.forEach((item) => {
          item.onclick = function () {
            let id = this.getAttribute("myid");
            console.log(id);
            //   window.location.href=`delete.php?id=${id}`;
            let xhr;
            if (window.XMLHttpRequest) {
              xhr = new XMLHttpRequest();
            } else {
              xhr = new ActiveXObject();
            }
            xhr.open("get", `./delete.php?id=${id}`, true);
            xhr.onload = function () {
              let resdata = JSON.parse(xhr.responseText);
              if (resdata.status == 1) {
                console.log("删除成功");
                getlist();
              } else {
                console.log("删除失败");
              }
            };
            xhr.send();
          };
        });
      }
      // 年龄大于25岁的人员筛选；
      sortEle.onclick = function () {
        let xhr;
        if (window.XMLHttpRequest) {
          xhr = new XMLHttpRequest();
        } else {
          xhr = new ActiveXObject();
        }
        xhr.open("get", "./getlist.php?sort=20", true);
        xhr.onload = function () {
          let data = JSON.parse(xhr.responseText);
          renderDom(data);
          del();
        };
        xhr.send();
        // window.location.href = "index.php?sort=25";
      };
      //   参数可以修改;
    </script>
  </body>
</html>
